import { useEffect, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

interface ClickHeart {
  id: number
  x: number
  y: number
}

export function RomanticEffects() {
  const [clickHearts, setClickHearts] = useState<ClickHeart[]>([])

  // 设置鼠标样式为爱心
  useEffect(() => {
    const style = document.createElement('style')
    style.textContent = `
      * {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="20">💕</text></svg>') 16 16, auto !important;
      }
      button, a, input, textarea, select {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="20">💖</text></svg>') 16 16, pointer !important;
      }
    `
    document.head.appendChild(style)

    return () => {
      document.head.removeChild(style)
    }
  }, [])

  // 点击绽放爱心 - 使用 framer-motion 优化
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      const clickHeart: ClickHeart = {
        id: Date.now() + Math.random(),
        x: e.clientX,
        y: e.clientY
      }
      
      setClickHearts(prev => [...prev, clickHeart])
      
      // 3秒后自动移除
      setTimeout(() => {
        setClickHearts(prev => prev.filter(heart => heart.id !== clickHeart.id))
      }, 3000)
    }

    window.addEventListener('click', handleClick)
    return () => window.removeEventListener('click', handleClick)
  }, [])


  return (
    <div className="fixed inset-0 pointer-events-none z-50">
      {/* 点击绽放爱心 - 使用 framer-motion 优化 */}
      <AnimatePresence>
        {clickHearts.map(heart => (
          <motion.div
            key={heart.id}
            className="absolute text-red-400 select-none"
            style={{
              left: heart.x - 15,
              top: heart.y - 15,
            }}
            initial={{ 
              scale: 0.5, 
              opacity: 1,
              rotate: 0
            }}
            animate={{ 
              scale: [0.5, 1.5, 2],
              opacity: [1, 0.8, 0],
              y: [-10, -30, -60],
              rotate: [0, 10, -10, 0]
            }}
            exit={{ 
              scale: 0,
              opacity: 0
            }}
            transition={{
              duration: 3,
              ease: "easeOut",
              times: [0, 0.3, 1]
            }}
          >
            ❤️
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  )
}

// 飘落樱花效果 - 增强真实感和随机性
export function SakuraEffect() {
  const [petals] = useState(() => 
    Array.from({ length: 15 }, (_, i) => {
      // 为每片樱花生成独特的运动参数
      const swingAmplitude = 20 + Math.random() * 40  // 摆动幅度：20-60px
      const swingSpeed = 2 + Math.random() * 3        // 摆动速度：2-5秒
      const fallSpeed = 6 + Math.random() * 6         // 下降速度：6-12秒
      const rotationSpeed = 3 + Math.random() * 5     // 旋转速度：3-8秒
      const size = 12 + Math.random() * 6             // 大小：12-18px
      
      return {
        id: i,
        initialX: Math.random() * window.innerWidth,
        delay: Math.random() * 8,
        // 独特的运动参数
        swingPattern: [
          0, 
          (Math.random() - 0.5) * swingAmplitude,
          (Math.random() - 0.5) * swingAmplitude * 0.8,
          (Math.random() - 0.5) * swingAmplitude * 1.2,
          (Math.random() - 0.5) * swingAmplitude * 0.6
        ],
        fallDuration: fallSpeed,
        swingDuration: swingSpeed,
        rotationDuration: rotationSpeed,
        fontSize: size,
        // 随机透明度变化模式
        opacityPattern: [
          0, 
          0.3 + Math.random() * 0.4,  // 0.3-0.7
          0.2 + Math.random() * 0.3,  // 0.2-0.5
          0
        ],
        // 随机缩放变化
        scalePattern: [
          0.6 + Math.random() * 0.3,  // 0.6-0.9
          0.8 + Math.random() * 0.4,  // 0.8-1.2
          0.7 + Math.random() * 0.3,  // 0.7-1.0
          0.9 + Math.random() * 0.4,  // 0.9-1.3
          0.5 + Math.random() * 0.3   // 0.5-0.8
        ]
      }
    })
  )

  return (
    <div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">
      {petals.map(petal => (
        <motion.div
          key={petal.id}
          className="absolute select-none"
          style={{
            fontSize: `${petal.fontSize}px`,
            left: petal.initialX,
            color: `hsl(${320 + Math.random() * 20}, 70%, ${75 + Math.random() * 15}%)` // 随机粉色调
          }}
          initial={{ 
            y: -80 - Math.random() * 50,  // 随机起始高度
            opacity: 0,
            rotate: Math.random() * 360,  // 随机初始旋转角度
            scale: petal.scalePattern[0]
          }}
          animate={{
            y: window.innerHeight + 100,
            opacity: petal.opacityPattern,
            rotate: 360 + Math.random() * 720,  // 1-3圈旋转
            x: petal.swingPattern,
            scale: petal.scalePattern
          }}
          transition={{
            duration: petal.fallDuration,
            delay: petal.delay,
            repeat: Infinity,
            ease: "linear",
            x: {
              duration: petal.swingDuration,
              repeat: Infinity,
              repeatType: "reverse",
              ease: "easeInOut"
            },
            scale: {
              duration: petal.rotationDuration * 0.7,
              repeat: Infinity,
              repeatType: "reverse",
              ease: "easeInOut"
            },
            rotate: {
              duration: petal.rotationDuration,
              repeat: Infinity,
              ease: "linear"
            }
          }}
        >
          {Math.random() > 0.7 ? '🌸' : Math.random() > 0.5 ? '🌺' : '🌸'}
        </motion.div>
      ))}
    </div>
  )
}
